<template>
  <view>
    <uni-popup
      ref="popup"
      type="bottom"
      border-radius="10px 10px 0 0"
    >
      <view class="popup">
        <view class="popup-header">
          <view class="user">
            <view
              class="user-name"
              @tap="toUserinfo"
            >
              Hi，147******10
            </view>
            <view
              class="user-level"
              @tap="toRights"
            >
              小雪球会员
            </view>
          </view>
          <view class="text-sm text-secondary">
            您有9项权益，开启提示不错过
          </view>
        </view>
        <scroll-view
          class="popup-content"
          scroll-y
        >
          <view class="py-sm">
            <view
              class="category-rights"
              v-for="(category, cIdx) in mainPageCategoryRights"
              :key="cIdx"
            >
              <image
                :src="`/static/images/index/gift_${cIdx + 1}.png`"
                class="category-image"
              />
              <view class="level-rights">
                <view
                  class="level-right"
                  v-for="(right, rIdx) in category.rights"
                  :key="rIdx"
                >
                  <image
                    :src="right.imgs"
                    class="level-right-icon"
                  />
                  <view class="level-right-info">
                    <view class="level-right-name"> {{ right.rightName }}</view>
                    <view class="level-right-desc">
                      {{ right.assistDesc }}</view
                    >
                  </view>
                  <button
                    v-if="right.buttonText"
                    class="level-right-button"
                    :class="{ 'button-primary': right.buttonType == 2 }"
                    @tap="toJumpUrl(right)"
                  >
                    {{ right.buttonText }}
                  </button>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="popup-footer">
          <view @tap="toRights">到「会员中心」查看权益详情</view>
          <uni-icons
            type="right"
            size="16"
            color="#777777"
            @tap="toRights"
          />
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
import { mapState } from "vuex"

export default {
  name: "RightLevelPopup",
  computed: {
    ...mapState("user", ["mainPageCategoryRights"])
  },
  methods: {
    popup() {
      this.$refs.popup.open()
    },
    toRights() {
      uni.navigateTo({
        url: "/pages/customer-center/rights/rights"
      })
    },
    toJumpUrl(right) {
      if (!right.jumpUrl) {
        uni.showToast({
          title: "暂不支持~",
          icon: "none"
        })
        return
      }

      const tabBarPages = [
        "/pages/index/index",
        "/pages/menu/menu",
        "/pages/order/order",
        "/pages/mine/mine"
      ]

      const baseUrl = right.jumpUrl.split("?")[0]

      if (tabBarPages.includes(baseUrl)) {
        uni.switchTab({
          url: right.jumpUrl
        })
      } else {
        uni.navigateTo({
          url: right.jumpUrl
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep {
  .uni-popup {
    z-index: 999;
  }
}

.popup {
  background-color: #fff;
  padding: $uni-spacing-row-lg;
  border-radius: 10px 10px 0 0;

  &-header {
    margin-bottom: $uni-spacing-row-lg;
  }

  &-content {
    height: 60vh;
  }

  &-footer {
    background-color: #fff;
    padding-top: $uni-spacing-row-lg;
    padding-bottom: calc(var(--window-bottom) + $uni-spacing-row-lg);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: $uni-font-size-sm;
    color: $uni-text-color-secondary;
  }
}

.user {
  display: flex;
  align-items: center;
  margin-bottom: $uni-spacing-row-sm;

  &-name {
    font-size: $uni-font-size-base;
    color: $uni-text-color;
    font-weight: bold;
    margin-right: $uni-spacing-row-xs;
  }

  &-level {
    padding: $uni-spacing-row-xs $uni-spacing-row-base;
    border-radius: 30px;
    background-color: $uni-color-warning-light;
    color: $uni-color-warning;
    font-size: $uni-font-size-sm;
  }
}

.category-rights {
  background-color: #fff;
  padding: $uni-spacing-row-lg;
  border-radius: $uni-border-radius-xl;
  margin-bottom: $uni-spacing-row-lg;
  border: 1rpx solid rgba($uni-color-primary, 0.1);
}

.category-image {
  width: 144rpx;
  height: 60rpx;
  margin-bottom: $uni-spacing-row-base;
}

.level-right {
  display: flex;
  align-items: center;
  padding: $uni-spacing-row-base 0;
  border-bottom: 1rpx solid rgba($uni-border-color, 0.8);

  &-icon {
    width: 120rpx;
    height: 120rpx;
  }

  &-info {
    flex: 1;
    margin-left: $uni-spacing-row-base;
  }

  &-name {
    font-size: $uni-font-size-base;
    color: $uni-text-color;
    font-weight: bold;
    margin-bottom: $uni-spacing-row-base;
  }

  &-desc {
    font-size: $uni-font-size-sm;
    color: $uni-text-color-secondary;
  }

  &-button {
    padding: $uni-spacing-col-base $uni-spacing-row-lg;
    border-radius: $uni-border-radius-base;
    font-size: $uni-font-size-sm;
    color: $uni-text-color;
    background-color: $uni-bg-color-grey;
    &.button-primary {
      background-color: #fff7fa;
      color: $uni-color-primary;
    }
  }
}
</style>
